<%--
  Created by IntelliJ IDEA.
  User: 荔向荣
  Date: 2022/5/21
  Time: 8:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" isELIgnored="false" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="to-top.css">
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/css/bootstrap.min.css" >
    <title>修改书籍信息</title>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.6.1/js/bootstrap.min.js"></script>
</head>
<body>
<form>
    <table class="table table-hover " id="book_table">
        <thead class="thead-light">
        <tr>
            <th>编号ID</th>
            <th>书号</th>
            <th class="text-center">封面</th>
            <th>书名</th>
            <th>作者</th>
            <th>出版社</th>
            <th>价格</th>
            <th>状态</th>
        </tr>
        </thead>
        <tbody>
        <c:if test="${not empty sessionScope.book}">
            <c:forEach items="${sessionScope.book}" var="Book">
                <tr>
                    <td style="vertical-align: middle"><strong>${Book.bkID}</strong></td>
                    <td style="vertical-align: middle"><strong>${Book.bkCode}</strong></td>
                    <td><img src="${Book.bkPic}" style="width:120px;height: 150px " alt=""></td>
                    <style>
                        img {
                            transition: all 0.5s; /*transition:过度属性*/
                            cursor: pointer; /*当鼠标进入图片的时候，鼠标的样式变为手型 */
                        }

                        img:hover {
                            transform: scale(1.2); /*transform:变形属性，scale：缩放1.1倍 */
                        }
                    </style>

                    <td style="vertical-align: middle;color: dodgerblue"><strong>${Book.bkName}</strong></td>
                        <%--                <td style="color: darkorange;vertical-align: middle">${Book.bkName}</td>--%>
                    <td style="vertical-align: middle"><strong>${Book.bkAuthor}</strong></td>
                    <td style="vertical-align: middle"><strong>${Book.bkPress}</strong></td>
                    <td style="vertical-align: middle"><strong>${Book.bkPrice}</strong></td>
                    <td style="vertical-align: middle;color:dodgerblue"><strong>${Book.bkStatus}</strong></td>
                    <td hidden>${Book.bkBrief}</td>
                    <td style="vertical-align: middle">
                        <button data-toggle="modal" data-target="#myModal1" id="display_bkBrief" class="btn btn-info">查看简介
                        </button>
                    </td>
                    <td style="vertical-align: middle"><button id="modify_book_info" type="button" data-toggle="modal" data-target="#myModal"  class="btn btn-info"
                            <c:if test="${Book.bkStatus eq '借出'}">
                                disabled
                            </c:if>>修改信息</button></td>
                </tr>
            </c:forEach>
        </c:if>
        </tbody>
    </table>
</form>

<%--成功模态框--%>
<div class="modal fade " id="Succeed_Modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h5 class="modal-title btn-outline-info">提示信息</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class="alert alert-success">
                    <strong>修改书籍成功!</strong>
                </div>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<%--失败模态框--%>
<div class="modal fade " id="failed_Modal">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h5 class="modal-title btn-outline-info">提示信息</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <!-- 模态框主体 -->
            <div class="modal-body">
                <div class="alert alert-danger">
                    <strong>修改书籍失败!</strong>
                </div>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
<%--模态框背景不变黑去除遮罩层--%>
<div class="modal  fade " id="myModal" data-backdrop=false>
    <%--    在这里写大一点的模态框--%>
    <div class="modal-dialog  modal-dialog-scrollable modal-lg ">
        <div class="modal-content ">
            <!-- 模态框头部 -->
            <div class="modal-header">
                <h5 class="modal-title btn-outline-info">请填写需修改的的信息</h5>
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>
            <!-- 模态框主体 -->
            <div class="modal-body">
                <div>
                    <form id="modify_book_form" enctype="multipart/form-data">
                        <table class="table table-hover " >
                            <tr>
                                <td class="h5">书名:<br><span class="btn-sm btn-outline-danger">必填项</span></td>
                                <td><input type="text" class="form-control" name="bkName" id="bkName" value=""><span id="info1"  style="color: red;display: none">值已修改</span></td>
                            </tr>
                            <tr>
                                <td class="h5">作者:<br><span class="btn-sm btn-outline-danger">必填项</span></td>
                                <td><input type="text" class="form-control" name="bkAuthor" id="bkAuthor" value=""><span id="info2"  style="color: red;display: none">值已修改</span></td>
                            </tr>
                            <tr>
                                <td class="h5">出版社:<br><span class="btn-sm btn-outline-danger">必填项</span></td>
                                <td><input type="text" class="form-control" name="bkPress" id="bkPress" value=""><span id="info3"  style="color: red;display: none">值已修改</span></td>
                            </tr>
                            <tr>
                                <td class="h5">价格:<br><span class="btn-sm btn-outline-danger">必填项</span></td>
                                <td><input type="text"  class="form-control" name="bkPrice" id="bkPrice" value=""><span id="info4"  style="color: red;display: none">值已修改</span></td>
                            </tr>
                            <tr>
                                <td class="h5">
                                    修改简介:<br><span class="btn-sm btn-outline-danger">必填项</span>
                                </td>
                                <td>
                                    <div style="position:relative;padding-bottom:20px">
                                        <textarea  onkeyup="rest_words(this,300,'input_words')" placeholder="请输入书籍简介信息" style="resize: none" maxlength="300" rows="5" cols="10" class="form-control " id="bkBrief" name="bkBrief"></textarea>
                                        <span  id="input_words" style="color:#cc24e6;text-align: end ;font-size:14px;position:absolute;height:20px;left:300px;bottom:0;"></span>
                                    </div>
                                </td>
                                <script>
                                    function rest_words(obj,maxlength,id)
                                    {
                                        var num=maxlength-obj.value.length;
                                        var leng=id;
                                        if(num<0){
                                            num=0;
                                        }
                                        document.getElementById(leng).innerHTML="剩余"+num+"/300"+"字符";
                                    }
                                </script>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <!-- 模态框底部 -->
            <div class="modal-footer">
                <button type="button" id="close_modal" class="btn btn-danger" data-dismiss="modal">关闭</button>
                <button type="button" id="confirm_modify_book"  data-dismiss="modal" class="btn btn-outline-primary">确认修改</button>
            </div>
        </div>
    </div>
</div>



<script>
    var formdata=new FormData();
    //后来更新的值 用let会被重新声明导致出错 用var声明全局变量
    var author,name, press,price,brief;
    //全局变量，获取table里的值
    var bkID, bkName,bkAuthor,bkPress,bkPrice,bkBrief;
    $("#close_modal").click(function (){
        //关闭时清空模态框数据 表单数据
        document.getElementById("modify_book_form").reset()
        //关闭模态框后重新设为不可见状态
        document.getElementById("info1").style.display='none';
        document.getElementById("info2").style.display='none';
        document.getElementById("info3").style.display='none';
        document.getElementById("info4").style.display='none';
    })
    // #modify_book_info解决了点击别的位置值会消失问题
    $(document).click(function (e){
        if($(e.target).attr('id')==='modify_book_info'){
            //找当前行的父元素tr标签的子节点td标签
            //获取table文本内容
            const data = $(e.target).parents('tr').children('td');
            bkID=data.eq(0).text();
            bkName = data.eq(3).text();
            bkAuthor = data.eq(4).text();
            bkPress = data.eq(5).text();
            bkPrice = data.eq(6).text();
            bkBrief=data.eq(8).text();
            //赋值给模态框里表单

            $("#bkName").val(bkName);
            $("#bkAuthor").val(bkAuthor);
            $("#bkPress").val(bkPress);
            $("#bkPrice").val(bkPrice);
        }
    })
    //添加input元素监听事件，值发生改变覆盖原来的值
    $("#bkName").on("input propertychange",function (){
        //获取当前dom对象的value值
        name = $(this).val();
        //转为原生dom对象
        if(name!==bkName){
            //显示span标签
            document.getElementById("info1").style.display='block';
            //set是覆盖value值不能用append，那个是追加
            formdata.set('bkName',name);
        }
        else {
            document.getElementById("info1").style.display='none';
        }
    })
    $("#bkAuthor").on("input propertychange",function (){
        author= $(this).val();
        //转为原生dom对象
        if(author!==bkAuthor){
            //显示span标签
            document.getElementById("info2").style.display='block';
            formdata.set('bkAuthor',author);
        }
        else {
            document.getElementById("info2").style.display='none';
        }
    })
    $("#bkPress").on("input propertychange",function (){
        press= $(this).val();
        //转为原生dom对象
        if(press!==bkPress){
            //显示span标签
            document.getElementById("info3").style.display='block';
            formdata.set('bkPress',press);
        }
        else {
            document.getElementById("info3").style.display='none';
        }
    })
    $("#bkPrice").on("input propertychange",function (){
        price = $(this).val();
        //转为原生dom对象
        if(price!==bkPrice){
            //显示span标签
            document.getElementById("info4").style.display='block';
            formdata.set('bkPrice',price);
        }
        else {
            document.getElementById("info4").style.display='none';
        }
    })
    $("#bkBrief").on("input propertychange",function (){
        brief = $(this).val();
        //转为原生dom对象
        if(brief!==bkBrief){
            formdata.set('bkBrief',brief);
        }
    })
    $("#confirm_modify_book").click(function (){
        //有选择性的改，不变的东西不去改它
        // const formdata = new FormData($("#modify_book_form")[0]);
        //[0]原生dorm对象
        //这句可以不需要，无选择性的改，就需要了，其实 formdata 已经封装好了，
        formdata.set("bkID",bkID);

        //拿到文件名字
        console.log(formdata.get('bkName'))
        console.log(formdata.get('bkPress'))
        console.log(formdata.get('bkID'));
        console.log(formdata.get('bkAuthor'));
        console.log(formdata.get('bkPrice'));
        $.ajax(
            {
                url:"http://localhost:8080/modifyBookServlet",
                type:'POST',
                data:formdata,
                cache:false,
                contentType:false,
                processData:false,
                success:function(data,status){
                    if(data==='修改书籍成功\r\n'){
                        $("#Succeed_Modal").modal();
                        setTimeout(function (){
                            $("#Succeed_Modal").modal('hide');
                        },1000)
                    }
                    else{
                        $("#failed_Modal").modal();
                        setTimeout(function (){
                            $("#failed_Modal").modal('hide');
                        },1000)
                    }
                },
                error:function (){
                    alert("请求失败")
                }
            }
        )
        document.getElementById("modify_book_form").reset();
        //关闭模态框后重新设为不可见状态
        document.getElementById("info1").style.display='none';
        document.getElementById("info2").style.display='none';
        document.getElementById("info3").style.display='none';
        document.getElementById("info4").style.display='none';
    })
</script>

</body>
</html>